<script setup lang="ts">
	import ToLogin from './ToLogin.vue'
	import { logout } from '@/stores/global';
	import useUserStore from '@/stores/user'

	const User = useUserStore()
</script>

<template>
	<view class="user-page">
		<view v-if="User.isLogined" class="logined">
			<image class='banner' src="https://cos.mylog.cool/web-files/carousel-0.jpg" mode="aspectFill" />
			<view class="profile">
				<!-- 悬浮层 -->
				<view class="float">
					<image class='img' :src="User.img" mode="aspectFill" />
					<view class="text">
						<view class="name">{{ User.name }}</view>
						<view class="id">LoggerId: {{ User.id }}</view>
						<view class="info">{{ User.info.sex }} {{ User.info.birth }}</view>
					</view>
				</view>
				<!-- 内容区域 -->
				<view>{{ User.info.text }}</view>

				<!-- {{ Object.keys(User.setting) }} -->
				<!-- {{ User.createtime }} -->
				<!-- {{Object.keys(User)}} -->
				<button @click='logout()'>退出登录</button>
			</view>

		</view>

		<!-- 用户未登录显示的页面 -->
		<ToLogin v-else />

	</view>
</template>

<style lang="scss" scoped>
	.user-page {
		height: 100%;


		.logined {
			position: relative;

			.banner {
				width: 100%;
			}

			.profile {
				position: absolute;
				top: 350rpx;

				width: 750rpx;
				border-radius: 32rpx;
				background-color: #fff;
				padding: 60rpx 32rpx 32rpx;

				.float {
					position: absolute;
					top: -160rpx;

					width: 90%;
					height: 210rpx; // 图片高度+2*border
					color: #fff;
					padding: 0 30rpx;
					gap: 30rpx;

					display: flex;

					.img {
						border: 5rpx solid #fff;
						border-radius: 50%;
						width: 200rpx;
						height: 200rpx;
					}

					.text {
						flex: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;

						.name {
							// border: 1px solid red;
							width: 100%;
							// border: 5rpx solid blue;
							white-space: nowrap;
							font-size: 60rpx;
							font-weight: bold;
						}

						.id {

							// border: 1px solid red;
							color: #ccc;
							font-size: 30rpx;
						}

						.info {
							color: #000;

							font-size: 30rpx;
							// border: 1px solid red;
							line-height: 50rpx;
						}
					}
				}


			}
		}
	}
</style>